import React, { useEffect, useMemo, useState, useRef } from 'react';
import { Form, Row, Col, Popover, Badge } from 'antd';
import request from '@/utils/request';
import { parse } from '@/pages/Organization/Role/utils';
import SearchTree from '@/pages/Organization/Role/component/SearchTree';
import styles from './postForm.less';

export default props => {
    const {
        doubleStyle,
        list,
        disabled,
        form: { getFieldDecorator }
    } = props;
    const [menuList, setMenuList] = React.useState([]);
    const [visibleModify, setVisibleModify] = useState(false);
    const postAuthPopoverRef = useRef();

    const { modify = {} } = props;

    useEffect(() => {
        const getMenuList = async () => {
            const response = await request('/api/oa/v1/post/auth/getTree', {
                method: 'post'
            });
            if (response.code === 10000) {
                setMenuList(response.data);
            }
        };
        getMenuList();
    }, []);

    const authModify = useMemo(() => {
        const { add_menu: addMenu = [], delete_menu: deleteMenu = [] } = modify;
        if (addMenu.length || deleteMenu.length) {
            setVisibleModify(true);
        } else {
            setVisibleModify(false);
        }
        return { addModify: addMenu, deleteModify: deleteMenu };
    }, [modify]);

    const content = (
        <div className={styles.authModifyWrap}>
            {authModify.addModify.map(item => (
                <div className={styles.modifyContent}>
                    <Badge status="success" style={{ width: '14px' }} />
                    <p>新增：{item}</p>
                </div>
            ))}
            {authModify.deleteModify.map(item => (
                <div className={styles.modifyContent}>
                    <Badge status="error" style={{ width: '14px' }} />
                    <p>删除：{item}</p>
                </div>
            ))}
        </div>
    );

    const FormPanel = () => (
        <Form.Item required label="功能权限" {...doubleStyle}>
            {getFieldDecorator('menuList', {
                initialValue: list,
                trigger: 'onCheck',
                valuePropName: 'valueProps',
                rules: [
                    {
                        validator(_, value = [], callback) {
                            if (Array.isArray(value) && value.length > 0) {
                                callback();
                            } else {
                                callback('请选择功能权限！');
                            }
                        }
                    }
                ]
            })(<SearchTree disabled={disabled} list={parse(menuList)} isAuthority isPortAuth={visibleModify} />)}
        </Form.Item>
    );

    return (
        <>
            <div className={styles.formBlockTitle}>权限管理</div>
            <Row gutter={24}>
                <Col span={12}>
                    <div ref={postAuthPopoverRef}>
                        {visibleModify ? (
                            <Popover
                                content={content}
                                title="变更内容"
                                placement="rightTop"
                                arrowPointAtCenter
                                trigger="hover"
                                align={{ targetOffset: ['0%', 0] }}
                                overlayClassName={styles.postAuthPopover}
                                getPopupContainer={() => postAuthPopoverRef.current}
                            >
                                <div>
                                    <FormPanel />
                                </div>
                            </Popover>
                        ) : (
                            <FormPanel />
                        )}
                    </div>
                </Col>
            </Row>
        </>
    );
};
